<template>
  <div :id="id" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: '',
  props: ['id', 'pieData', 'legendShow', 'radius', 'center', 'legendRight', 'roseType'],
  data() {
    return {
      myChart: null
    }
  },
  mounted() {
    this.init()
  },
  created() {},
  methods: {
    init() {
      if (this.myChart) {
        this.myChart.dispose()
      }
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById(this.id))
      var total = this.pieData.reduce((accumulator, currentValue) => {
        return accumulator + currentValue.value
      }, 0)
      // 绘制图表
      this.myChart.setOption({
        grid: {
          show: false, //是否显示图表背景网格
          left: 0,
          top: 0
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // 使用外部变量total
            return params.name + '：' + params.percent + '%   总数：' + total
          }
        },
        legend: {
          show: this.legendShow || false,
          orient: 'vertical',
          right: this.legendRight || '20%',
          top: '10%',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            type: 'pie',
            radius: this.radius || [35, 65],
            center: this.center || ['30%', '43%'],
            roseType: this.roseType || '',
            itemStyle: {
              borderRadius: 4,
              color: function (colors) {
                var colorList = ['#EBBA45', '#00B8FF', '#60F8FF', '#0098C4', '#2050df ', ' #9f20df', '#df2080', '#df20cf']
                return colorList[colors.dataIndex]
              }
            },
            label: {
              show: false
              // color: '#fff'
            },
            data: this.pieData
          }
        ]
      })
      // window.onresize = function () {
      //   this.myChart.resize()
      // }
    }
  }
}
</script>
<style></style>